import React from 'react'
import './selectnav.css'
import { withRouter } from 'react-router-dom';

// 设置一个数组，下标为0处永远是标题。之后按照value值依次排开不同数据
// 结构待封装，有空再搞
const data = [
    {
        title: '种类'
    },
    {
        index: 1,
        label: '所有',
    }, {
        index: 2,
        label: '葡萄',
    },
    {
        index: 3,
        label: '梨',
    },
    {
        index: 4,
        label: '苹果',
    },
    {
        index: 5,
        label: '核桃',
    },
    {
        index: 6,
        label: '枣',
    }
];

class SelectNav extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            kind: '所有',
            money: '所有'
        };
        this.handleChange1 = this.handleChange1.bind(this);
        this.handleChange2 = this.handleChange2.bind(this);

        // this.props.history.push(`/all/${this.state.kind}&${this.state.money}`);
    }
    handleChange1(event) {
        this.setState({
            kind: event.target.value
        })
        this.props.history.push(`/all/${event.target.value}&${this.state.money}`);
    }
    handleChange2(event) {
        this.setState({
            money: event.target.value
        })
        this.props.history.push(`/all/${this.state.kind}&${event.target.value}`);
    }

    render() {
        return (
            <div style={{ width: '100%' }}>
                <label>
                    <span>{data[0].title}</span>
                    <select value={this.state.kind} onChange={this.handleChange1} className="selectnav-select">
                        <option value={data[1].label}>{data[1].label}</option>
                        <option value={data[2].label}>{data[2].label}</option>
                        <option value={data[3].label}>{data[3].label}</option>
                        <option value={data[4].label}>{data[4].label}</option>
                        <option value={data[5].label}>{data[5].label}</option>
                    </select>
                </label>

                <label style={{ marginLeft: '20px' }}>
                    <span>价格</span>
                    <select value={this.state.money} onChange={this.handleChange2} className="selectnav-select">

                        <option value="所有">所有</option>
                        <option value="1-50">1-50</option>
                        <option value="50-100">50-100</option>

                    </select>
                </label>
                {/* <div>选择 {this.state.value}</div> */}
            </div>
        )
    }

}

export default withRouter(SelectNav);